import { StyleSheet, Dimensions } from "react-native";

const { width } = Dimensions.get("window");

const styles = StyleSheet.create({
  blurContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  container: {
    flex: 1,
    backgroundColor: "#111",

    alignItems: "center",
    justifyContent: "center",
  },
  statusText: {
    color: "#aaa",
    fontSize: 18,
    marginBottom: 20,
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 60,
    marginBottom: 16,
  },
  nameText: {
    color: "#fff",
    fontSize: 24,
    fontWeight: "600",
    marginBottom: 40,
  },
  controlsRow: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "center",
    justifyContent: "space-around",
    width: width - 60,
  },
  controlButton: {
    alignItems: "center",
  },
  controlLabel: {
    marginTop: 8,
    color: "#fff",
    fontSize: 12,
    maxWidth: 60,
    alignSelf: "center",
    textAlign: "center",
  },
  circleButton: {
    backgroundColor: "#fff",
    borderRadius: 40,
    padding: 12,
  },
  hangupButton: {
    backgroundColor: "#f33",
    borderRadius: 40,
    padding: 12,
  },
  videoContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  rtcView: {
    width: 200,
    height: 200,
  },
  localRtcView: {
    width: 200,
    height: 150,
    position: "absolute",
    backgroundColor: "white",
    bottom: 40,
    right: 20,
    zIndex: 2,
  },
});

export default styles;
